<template>
  <div class="yy-abnormal-project-query">
    <!--列表-->
    <div class="yy-goods-manage-list" v-show="type=='list'">
      <Card>
        <p slot="title">
          <Icon type="md-list" />
          异常项目查询
        </p>
        <Form ref="formInline" :model="searchForm"  inline>
            <FormItem prop="user">
              <Input type="text" v-model="searchForm.dNum" placeholder="设备编码"></Input>
            </FormItem>
            <FormItem prop="user">
              <Input type="text" v-model="searchForm.dName" placeholder="设备名称"></Input>
            </FormItem>
            <FormItem prop="user">
              <Select class="select" placeholder="请选择设备类型" v-model="searchForm.dcName">
                <Option value="">请选择</Option>
              </Select>
            </FormItem>
            <FormItem prop="user">
              <Input type="text" v-model="searchForm.itkNum" placeholder="任务单号"></Input>
            </FormItem>
            <FormItem prop="user">
              <Input type="text" v-model="searchForm.itkName" placeholder="任务名称"></Input>
            </FormItem>
            <FormItem prop="user">
              <Input type="text" v-model="searchForm.dipKeshi" placeholder="单位部门"></Input>
            </FormItem>
            <FormItem prop="user">
              <Input type="text" v-model="searchForm.manager" placeholder="责任人"></Input>
            </FormItem>
            <FormItem prop="user">
              <DatePicker type="date" placeholder="起始时间" style="width: 200px" v-model="searchForm.ditST" :options="startTimeOption" @on-change="onStartTimeChange"></DatePicker>
            </FormItem>
            <FormItem prop="user">
              <DatePicker type="date" placeholder="结束时间" style="width: 200px" v-model="searchForm.ditET" :options="endTimeOption" @on-change="onEndTimeChange"></DatePicker>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSearch()">查询</Button>
            </FormItem>
        </Form>
        <Table :columns="columns" :data="data" ></Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
              <Page :total="page.total" :page-size="page.pageSize" :current="1" @on-change="changePage" show-total></Page>
          </div>
        </div>
      </Card>
    </div>
    <!--详情-->
    <div class="yy-goods-manage-details" v-show="type=='details'">
       <Card>
        <p slot="title">
          <Icon type="md-paper"/>
          查看详情
        </p>
        <p slot="extra">
          <Button type="primary" @click="goBack()">返回</Button>
        </p>
        <div class="details">
          <p class="details-title"><span>任务单号:</span>{{currentData.itkNum}}</p>
          <p class="details-title"><span>任务名称:</span>{{currentData.itkName}}</p>
          <p class="details-title"><span>计划编号:</span>{{currentData.dipNum}}</p>
          <p class="details-title"><span>计划名称:</span>{{currentData.dipName}}</p>
          <p class="details-title"><span>设备编码:</span>{{currentData.dNum}}</p>
          <p class="details-title"><span>设备名称:</span>{{currentData.dName}}</p>
          <p class="details-title"><span>责任人:</span>{{currentData.manager}}</p>
          <p class="details-title"><span>责任单位部门:</span>{{currentData.dipKeshi}}</p>
          <p class="details-title"><span>接单时间:</span>{{currentData.tkRecTime}}</p>
          <p class="details-title"><span>执行人:</span>{{currentData.itkRenName}}</p>
          <p class="details-title"><span>完成时间:</span>{{currentData.tkCompTime}}</p>
          <p class="details-title"><span>开始时间:</span>{{currentData.tkTime}}</p>
          <p class="details-title"><span>备注:</span>{{currentData.remark}}</p>
        </div>
        <Divider :model="detailsList">异常任务</Divider>
        <Table :columns="columnsDetailsList" :data="detailsList" height=200 ></Table>
        </Form>
      </Card>
    </div>
    <!--添加/编辑-->
    <div class="yy-goods-manage-add-edit"  v-show="type=='edit'">
      <Card>
        <p slot="title">
          <template v-if="type=='edit'"> 
            <Icon type="md-document"/>编辑
          </template>
        </p>
        <p slot="extra" >
          <Button type="primary" @click="goBack()">返回</Button>
        </p>
        <div class="editForm">
          <Form ref="editForm" :model="editFormInLine" :rules="editFormRuleInline" :label-width="100" @keydown.native.enter.prevent ="handleSubmit">
            <FormItem label="工单号"  prop="ItkNum">
              <Input v-model="editFormInLine.itkNum" placeholder="请输入工单号"  :disabled="type=='edit'? true:false"></Input>
            </FormItem>
            <FormItem label="设备名称" prop="dName">
              <Input v-model="editFormInLine.dName" placeholder="请输入设备名称" :disabled="type=='edit'? true:false"></Input>
            </FormItem>   
            <FormItem label="设备编码" prop="dNum">
            <Input v-model="editFormInLine.dNum" placeholder="请输入设备编码" :disabled="type=='edit'? true:false"></Input>
            </FormItem>      
            <FormItem label="报修电话" prop="gdCode">
              <Input v-model="editFormInLine.gdCode" min=0 placeholder="请输入报修电话"></Input>
            </FormItem>
            <FormItem label="报修人信息" prop="itkRenName">
              <Input v-model="editFormInLine.itkRenName" min=0 placeholder="请输入报修人信息" :disabled="type=='edit'? true:false"></Input>
            </FormItem>
            <FormItem label="报修部门" prop="dipKeshi">
              <Input v-model="editFormInLine.dipKeshi" placeholder="请输入报修部门" :disabled="type=='edit'? true:false"></Input>
            </FormItem>
            <FormItem label="设备系统" prop="dsName">
            <Input class="select" v-model="editFormInLine.dsName" placeholder="请输入设备系统" :disabled="type=='edit'? true:false"></Input>
            </FormItem>
            <FormItem label="设备分类" prop="dcName">
            <Input class="select" v-model="editFormInLine.dcName" placeholder="请输入设备分类" :disabled="type=='edit'? true:false"></Input>
            </FormItem>
            <FormItem label="维修地点" prop="installAddress">
              <Input v-model="editFormInLine.installAddress" placeholder="请输入维修地点"></Input>
            </FormItem>
            <FormItem label="报修备注" prop="remark">
              <Input v-model="editFormInLine.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入报修备注" maxlength="50"></Input>
            </FormItem>
            <FormItem>
              <Button @click="handleSubmit" type="primary" class="button">创建</Button>
              <Button @click="handleReset" type="primary" class="button">重置</Button>
            </FormItem>
          </Form>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import API from "./api";
import ValidatorRule from "@/filters/validator-rule";
import { formatNetTime } from "@/libs/tools";
import i18n from "./locale";

export default {
  name: "yy-abnormal-project-query",
  data() {
    return {
      i18n: i18n,
      currentData: "",
      detailsModal: false,
      type: "list",
      dataCateName: [],
      page: {
        total: 0,
        pageSize: 20
      },
      searchForm: {
        itkNum: "",
        itkName: "",
        dcNum: "",
        dNum: "",
        dName: "",
        dipKeshi: "",
        manager: "",
        ditST: "",
        ditET: "",
        isAllData: 1,
        status: 99,
        userID: ""
      },

      editFormInLine: {
        itkNum: "",
        userID: "",
        userName: "",
        b_UserRole: "",
        b_DepartNum: ""
      },
      editFormRuleInline: {
        dName: ValidatorRule.require,
        dNum: ValidatorRule.require,
        itkRenName: ValidatorRule.require,
        dsName: ValidatorRule.require,
        dcName: ValidatorRule.require,
        installAddress: ValidatorRule.require
      },
      columns: [
        {
          title: "任务单号",
          key: "itkNum"
        },
        {
          title: "任务名称",
          key: "itkName"
        },
        {
          title: "设备名称 ",
          key: "dName"
        },
        {
          title: "设备编码 ",
          key: "dNum"
        },
        {
          title: "状态 ",
          key: ""
        },
        {
          title: "责任单位部门 ",
          key: "dipKeshi"
        },
        {
          title: "责任人 ",
          key: "manager"
        },
        {
          title: "执行人",
          key: "itkRen"
        },
        {
          title: "操作",
          key: "action",
          width: 180,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.details(params.index);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.index);
                    }
                  }
                },
                "创建工单"
              )
            ]);
          }
        }
      ],
      data: [],
      columnsDetailsList: [
        {
          title: "步骤编码",
          key: "ditNum"
        },
        {
          title: "步骤名称",
          key: "ditName"
        },
        {
          title: "步骤参考值",
          key: "stValue"
        },
        {
          title: "报警关系",
          key: "relation"
        },
        {
          title: "巡检结果",
          key: ""
        },
        {
          title: "结果记录",
          key: "inPrice"
        },
        {
          title: "异常故障描述",
          key: "isSpare"
        }
      ],
      detailsList: []
    };
  },

  mounted() {
    this.userInfo = this.$store.state.user.userInfo;
    this.getCateList();
    this.handleSearch();
  },

  computed: {},

  methods: {
    getCateList() {
      let tthis = this;
      let obj = {
        userID: tthis.userInfo.userId,
        userName: tthis.userInfo.userName,
        b_UserRole: "",
        hasLocation: 1
      };
      this.getCateNameList(obj);
    },

    getCateNameList(obj) {
      API.getCateNameList(obj)
        .then(res => {
          if (res.code == 200) {
            let dataCate = res.data;
            this.dataCateName = dataCate.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    handleSearch() {
      let obj = this.searchForm;
      obj.pageNum = 1;
      obj.pageSize = this.page.pageSize;
      this.searchForm = obj;
      this.getList(obj);
    },

    changePage(pageNum) {
      let obj = this.searchForm,
        maxPageNum = Math.ceil(this.page.total / this.page.pageSize);
      if (obj.pageNum > maxPageNum) {
        obj.pageNum = maxPageNum;
      } else {
        obj.pageNum = pageNum;
      }
      this.searchForm = obj;
      this.getList(obj);
    },

    getList(obj) {
      API.getList(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            if (data != null) {
              this.page.total = data.total;
              this.page.pageSize = data.pageSize;
              this.data = data.list;
            } else {
              this.$Message.success({ content: "暂无数据！" });
              this.data = [];
            }
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    goBack() {
      this.type = "list";
    },

    details(index) {
      let tthis = this;
      this.type = "details";
      this.currentData = _.clone(this.data[index]);
      let obj = {
        itkNum: tthis.data[index].itkNum,
        userID: tthis.userInfo.userId,
        userName: tthis.userInfo.userName,
        b_UserRole: "admin",
        b_DepartNum: "admin"
      };
      this.currentData = this.data[index];
      this.getDetailsList(obj);
    },

    getDetailsList(obj) {
      API.getDetailsList(obj)
        .then(res => {
          if (res.code == 200) {
            let dataDet = res.data;
            this.detailsList = dataDet.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    edit(index) {
      this.type = "edit";
      this.handleReset();
      this.currentData = this.data[index];
      //this.editFormInLine.cateNum = this.currentData.cateNum;
      this.editFormInLine = _.clone(this.currentData);
    },

    resetList() {
      //求余为1，页码为最大页码，请求页需减1
      let maxPageNum = Math.ceil(this.page.total / this.page.pageSize);
      let remainderNum = this.page.total % this.page.pageSize;
      if (
        this.searchForm.pageNum == maxPageNum &&
        remainderNum == 1 &&
        this.searchForm.pageNum !== 1
      ) {
        this.searchForm.pageNum = this.searchForm.pageNum - 1;
      }
      let obj = this.searchForm;
      this.getList(obj);
    },

    handleSubmit() {
      //console.log(384, this.editFormInLine);
      this.$refs.editForm.validate(valid => {
        if (valid) {
          if (this.type == "edit") {
            this.editSubmit(this.editFormInLine);
          } else {
            this.addSubmit(this.editFormInLine);
          }
        }
      });
    },

    handleReset() {
      this.$refs.editForm.resetFields();
      if (this.type == "edit") {
        this.editFormInLine.ItkNum = this.currentData.ItkNum;
        this.editFormInLine.dName = this.currentData.dName;
        this.editFormInLine.dNum = this.currentData.dNum;
        this.editFormInLine.itkRenName = this.currentData.itkRenName;
        this.editFormInLine.dipKeshi = this.currentData.dipKeshi;
        this.editFormInLine.dsName = this.currentData.dsName;
        this.editFormInLine.dcName = this.currentData.dcName;
      }
    },

    editSubmit(obj) {
      API.editSubmit(obj)
        .then(res => {
          if (res.code == 200) {
            this.resetList();
            this.$Message.success("创建工单成功！");
            this.goBack();
          }
        })
        .catch(err => {
          this.$Message.error("创建工单异常！");
        });
    }
  }
};
</script>
<style lang="less" >
@import "./yy-abnormal-project-query.less";
</style>
